<template>
  <div>
    <el-steps :active="active" align-center>
      <el-step title="待付款" />
      <el-step title="待发货" />
      <el-step title="已发货" />
      <el-step v-if="active !=5" title="已完成" />
      <el-step v-if="active !=4" title="退货" />
    </el-steps>
    <div>
      <p>订单状态:{{ info.orderBase.status |statusText }}</p>
      <p>订单编号:{{ info.orderBase.orderSn }}</p>
      <p>判断商品是否退货 通过 orderItems ==> isReturn 字段判断  1为退货 0 为未退货</p>
    </div>
    <div v-if="active == 2">
      <el-form ref="form" :model="form" label-width="80px" :inline="true" size="mini">
        <el-form-item label="物流公司">

          <el-select v-model="form.deliveryCompany" value-key="" placeholder="" clearable filterable @change="">
            <el-option
              v-for="item in deliveryCompany"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>

        </el-form-item>
        <el-form-item label="物流单号">
          <el-input v-model="form.deliverySn" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
        </el-form-item>
      </el-form>

    </div>
  </div>
</template>

<script>
import {
  orderDetail,
  sendDone
} from '@/api/orderManage/orderList/orderInfo/index.js'
export default {
  filters: {
    statusText(val) {
      if (val == 0) {
        return '未付款'
      } else if (val == 1) {
        return '确认付款,等待发货'
      } else if (val == 2) {
        return '已发货'
      } else if (val == 3) {
        return '已收货'
      } else if (val == 4) {
        return '已退单'
      } else {
        return '无效订单'
      }
    }
  },
  data() {
    return {
      info: {},
      active: 1,
      deliveryCompany: ['顺丰', '邮政', '申通'],
      form: {
        orderId: this.$route.query.id,
        deliverySn: '',
        deliveryCompany: ''
      }
    }
  },
  computed: {

  },
  created() {
    this.init()
  },
  mounted() {

  },
  methods: {
    init() {
      orderDetail(this.$route.query.id)
        .then(res => {
          this.info = res.data.orderDetail
          this.active = res.data.orderDetail.orderBase.status + 1
        })
    },
    onSubmit() {
      sendDone(this.form)
        .then(res => {
          this.init()
        })
    }
  }
}
</script>

<style scoped lang="scss">

</style>
